<template>
  <div class="settle-container">
    <div class="login-container">
      <h3 class="login-title">入驻申请</h3>
      <el-form ref="loginFormRef" :model="loginForm" :rules="rules" label-width="100px">
        <!-- 入驻类型选择 -->
        <el-form-item prop="userType" label="入驻类型">
          <el-select v-model="loginForm.userType" placeholder="请选择入驻类型" class="login-input">
            <el-option
              v-for="item in applyTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="nickname" label="姓名">
          <el-input v-model="loginForm.nickname" placeholder="请输入姓名" class="login-input">
            <template #prefix>
              <!-- <el-icon><User /></el-icon> -->
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phonenumber">
          <el-input v-model="loginForm.phonenumber" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="手机验证码" prop="code">
          <el-input v-model="loginForm.code" placeholder="请输入手机验证码">
            <template #append>
              <el-button :disabled="isCounting" @click="sendCode">
                {{ isCounting ? `${countDown}秒后重试` : "获取验证码" }}
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <!-- <el-form-item prop="agreement">
            <el-checkbox v-model="loginForm.agreement">
              阅读并接受
              <el-link type="primary" @click.stop.prevent="showUserAgreement">《用户协议》</el-link>
              和
              <el-link type="primary" @click.stop.prevent="showPrivacyPolicy">《隐私权保护声明》</el-link>
            </el-checkbox>
          </el-form-item> -->
      </el-form>
      <el-row :gutter="20">
        <el-col :span="12" :offset="6">
          <el-button
            :loading="loading"
            size="large"
            type="primary"
            style="width: 100%"
            @click.prevent="submitForm"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { getCodeSms, getMerchantSettle } from "./utils/settle";
import { applyTypeList } from "./utils/enum";
const loginFormRef = ref(null);
const loginForm = reactive({
  userType: "",
  nickname: "",
  phonenumber: "",
  code: "",
  // agreement: false
});
const emit = defineEmits(["funcSettleSuccess"]);
const rules = {
  nickname: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { min: 2, max: 10, message: "姓名长度应在2-10个字符之间", trigger: "blur" },
  ],
  userType: [{ required: true, message: "请选择入驻类型", trigger: "blur" }],
  phonenumber: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur" },
  ],
  code: [
    { required: true, message: "请输入验证码", trigger: "blur" },
    { len: 6, message: "验证码应为6位", trigger: "blur" },
  ],
  // agreement: [
  //   {
  //     validator: (rule, value, callback) => {
  //       if (!value) {
  //         callback(new Error('请阅读并同意用户协议和隐私权保护声明'))
  //       } else {
  //         callback()
  //       }
  //     },
  //     trigger: 'change'
  //   }
  // ]
};
const reallyCode = ref("");
const loading = ref(false);
const isCounting = ref(false);
const countDown = ref(60);

const userAgreementVisible = ref(false);
const privacyPolicyVisible = ref(false);

const sendCode = () => {
  if (!loginForm.phonenumber) {
    ElMessage.error("请输入手机号");
    return;
  }
  if (!rules.phonenumber[1].pattern.test(loginForm.phonenumber)) {
    ElMessage.error("手机号格式不正确");
    return;
  }
  getCodeSmsFunc();
};
const getCodeSmsFunc = async () => {
  try {
    const res = await getCodeSms(loginForm.phonenumber);
    console.log(res, "res1111111");
    reallyCode.value = res;
    // 模拟发送验证码
    ElMessage.success("验证码发送成功，请注意查收");
    isCounting.value = true;
    const interval = setInterval(() => {
      countDown.value--;
      if (countDown.value <= 0) {
        clearInterval(interval);
        isCounting.value = false;
        countDown.value = 60;
      }
    }, 1000);
  } catch (error) {
    console.log(error, "error");
    isCounting.value = false;
  } finally {
  }
};
const submitForm = () => {
  loginFormRef.value.validate((valid) => {
    console.log(loginForm.code, reallyCode.value, "reallyCode.value");
    if (valid) {
      if (loginForm.code !== reallyCode.value) {
        ElMessage.error("验证码不正确");
        return;
      }
      submitMerchantSettleFunc();
    } else {
      // ElMessage.error('表单验证失败');
    }
  });
};
async function submitMerchantSettleFunc() {
  try {
    loading.value = true;
    const res = await getMerchantSettle(loginForm);
    console.log(res, "res");
    ElMessage.success("申请入驻成功，请等待审核");
  } catch (error) {
    console.log(error, "error");
  } finally {
    loading.value = false;
  }
}
// 重置表单
const resetForm = () => {
  if (!loginFormRef.value) return;
  // 重置表单字段
  loginFormRef.value.resetFields();
  loginForm.value = {
    userType: "",
    nickname: "",
    phonenumber: "",
    code: "",
  };
  reallyCode.value = "";
};
// 显示用户协议
const showUserAgreement = () => {
  userAgreementVisible.value = true;
};

// 显示隐私政策
const showPrivacyPolicy = () => {
  privacyPolicyVisible.value = true;
};
// 获取商户入驻申请列表
const getApplyListFunc = async () => {
  try {
    const res = await getApplyList();
    console.log(res, "res");
  } catch (error) {
    console.log(error, "error");
  }
};
onMounted(() => {
  //getApplyListFunc()
});
</script>

<style scoped>
.login-container {
  width: 500px;
  height: 400px;
  padding: 20px;
  margin: 100px auto;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
}

.agreement-content {
  max-height: 60vh;
  overflow-y: auto;
  padding: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #606266;
}

:deep(.el-dialog__body) {
  padding: 0;
}
</style>
